<docs>
# 时间进度组件
## props
- allstart
- allend
- starttime
- endtime
- color
</docs>
<template>
  <div class="timeProgress">
    <span>{{allstart}}</span>
    <div class="line">
      <el-tooltip
        class="item"
        effect="dark"
        :content="starttime+'至'+endtime"
        placement="top-start"
      >
        <div class="time" :class="color" :style="{'width':width,'margin-left':marginLeft}"></div>
      </el-tooltip>
    </div>
    <span>{{allend}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: "",
      marginLeft: ""
    };
  },
  props: {
    allstart: {
      type: String
    },
    allend: {
      type: String
    },
    starttime: {
      type: String
    },
    endtime: {
      type: String
    },
    color: {
      type: String,
      default: "linear_blue"
    }
  },
  created() {
    this.init();
  },
  updated() {
    this.init();
  },
  methods: {
    init() {
      const _allstart = new Date(this.allstart).getTime(); //总的开始时间戳
      const _allend = new Date(this.allend).getTime(); //总的介绍时间戳
      const _starttime = new Date(this.starttime).getTime(); //实际开始时间戳
      const _endtime = new Date(this.endtime).getTime(); //实际结束时间戳
      if (_starttime >= _allstart) {
        let _alltime = _allend - _allstart;
        if (_endtime <= _allend) {
          //情况一 实际时间范围都在总的时间范围内
          let _width =
            (((_endtime - _starttime) / _alltime) * 100).toFixed(2) + "%";
          let _offset =
            (((_starttime - _allstart) / _alltime) * 100).toFixed(2) + "%";
          this.width = _width;
          this.marginLeft = _offset;
        } else {
          let _offset = (_starttime - _allstart) / _alltime;
          let _width = 1 - _offset;
          this.width = (_width * 100).toFixed(2) + "%";
          this.marginLeft = (_offset * 100).toFixed(2) + "%";
        }
      } else {
        let _alltime = _allend - _allstart;
        if (_endtime <= _allend) {
          //情况二 实际开始时间小于总的开始时间
          let _width =
            (((_endtime - _allstart) / _alltime) * 100).toFixed(2) + "%";
          this.width = _width;
          this.marginLeft = 0;
        } else {
          this.width = "100%";
          this.marginLeft = 0;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.timeProgress {
  display: flex;
  align-items: center;
  justify-content: center;
  & > span {
    flex: 0 0 auto;
    font-size: 12px;
    color: #cccccc;
    margin: 0 10px;
  }
  .line {
    flex: 1;
    border-top: 1px dashed #cccccc;
    position: relative;
  }
  .time {
    position: absolute;
    top: -3px;
    left: 0;
    height: 6px;
    width: 40%;
    border-radius: 7px;
    transition: all 0.2s ease;
  }
  .linear_blue {
    background: #56ccf2; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #56ccf2,
      #2f80ed
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #56ccf2,
      #2f80ed
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  .linear_pink {
    background: #eecda3; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #f7abd7,
      #ef629f
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #f7abd7,
      #ef629f
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
}
</style>
